<template>
  <div class="child-container">
    <h2>{{name}}</h2>

    <button id="counter"
            @click="counter">{{count}}</button>

    <slot name="first"></slot>
    <slot></slot>
    <slot name="second"></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Child',
  props: {
    name: {
      type: String
    }
  },
  setup (props, context) {
    const count = ref<number>(0)
    function counter () {
      count.value++
    }

    context.emit('hello', 'tom')
    context.emit('hello', 'jerry')
    context.emit('bye', 'tom')

    return {
      counter,
      count
    }
  }
})
</script>
